<template>
    <div style="display: flex;margin: 150px 300px">
        <div style="width: 200px;margin-left: 100px">
            <div id="he-plugin-simple" >
                <el-button @click="weather2" type="success" style="border-radius: 20px">简约天气</el-button></div>
        </div>
        <div style="width: 200px;margin-left: 100px">
        <div id="he-plugin-standard">
            <el-button @click="weather1" type="primary"  style="border-radius: 20px">标准天气</el-button>
        </div></div>
        <br/>




    </div>
</template>

<script>
    export default {
        name: 'Weather',

        methods: {
            weather1() {
                window.WIDGET = {
                    "CONFIG": {
                        "layout": "1",
                        "width": "450",
                        "height": "150",
                        "background": "1",
                        "dataColor": "FFFFFF",
                        "borderRadius": "10",
                        "key": "4f7e27e0e4fd4a9d92b14b47b1b5f695"
                    }
                }
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
                document.getElementsByTagName('head')[0].appendChild(script);

            },
            weather2() {
                window.WIDGET = {
                    "CONFIG": {
                        "modules": "01234",
                        "background": "1",
                        "tmpColor": "FFFFFF",
                        "tmpSize": "16",
                        "cityColor": "FFFFFF",
                        "citySize": "16",
                        "aqiColor": "FFFFFF",
                        "aqiSize": "16",
                        "weatherIconSize": "24",
                        "alertIconSize": "18",
                        "padding": "10px 10px 10px 10px",
                        "shadow": "0",
                        "language": "auto",
                        "borderRadius": "30",
                        "fixed": "false",
                        "vertical": "top",
                        "horizontal": "left",
                        "key": "7f18cc8056414ea0965099fa1d1dacf9"
                    }
                }
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0';
                document.getElementsByTagName('head')[0].appendChild(script);


            }
        }
    }
</script>

<style>

</style>
